<template>
	<view>
		<view class="topic-list" v-for="(item, index) in hotsList" :key="index">
			<view class="topic-item u-padding-30">
				<!--用户信息-->
				<view class="topic-item-user u-flex">
					<u-avatar :src="item.avatar" size="mini"></u-avatar>
					<text class="nickname u-margin-left-20">{{item.nickname}}</text>
				</view>
				<!--帖子内容-->
				<view class="topic-item-content u-margin-top-20" @tap="jump('/pages/topic/topic', { id: item.id })">
					<rich-text class="post-text" :nodes="item.text"></rich-text>
					<!--1张图-->
					<view class="u-margin-top-30" v-if="item.images.length == 1">
						<image :lazy-load="true" mode="aspectFill" :src="item.images[0]" class="img-style-1"
							@tap.stop="previewImage(item.images[0],item.images)">
						</image>
					</view>
					<!--2张图-->
					<view v-if="item.images.length == 2">
						<view class="img-style-2">
							<image :lazy-load="true" v-for="(mediaItem, index2) in item.images" :key="index2"
								mode="aspectFill" :src="mediaItem" @tap.stop="previewImage(mediaItem,item.images)">
							</image>
						</view>

					</view>
					<!--3张以上-->
					<view v-if="item.images.length > 2">
						<view class="img-style-3">
							<image :lazy-load="true" v-for="(mediaItem, index2) in item.images" :key="index2"
								mode="aspectFill" :src="mediaItem" @tap.stop="previewImage(mediaItem,item.images)">
							</image>
						</view>
					</view>
				</view>
				<!--帖子列表底部-->
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState } from 'vuex';
	export default {
		data() {
			return {
				hotsList: []
			}
		},
		onLoad() {
			this.topicHots();
		},
		methods: {
			topicHots() {
				this.$http('topic.topicHotlist', {}).then(res => {
					if (res.code === 1) {
						this.hotsList = res.data.list;
						//this.$u.toast(res.msg);
					}
				});
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.topic-item {
		width: 100%;
		height: auto;
		line-height: 1.5em;
		background: #FFFFFF;
		margin-bottom: 10rpx;
		overflow: hidden;
		padding-bottom: 20rpx;

		.topic-item-content {
			.img-style-1 {
				display: block;
				width: 100%;
				max-height: 600rpx;
				border-radius: 5px;
				overflow: hidden;
			}

			.img-style-2 {
				display: flex;

				image {
					margin: 5rpx;
					border-radius: 5px;
					width: 100%;
					height: 294rpx;
				}
			}

			.img-style-3 {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 31.3%;
					height: 200rpx;
					margin: 1%;
					border-radius: 5px;
				}

			}

		}
	}
</style>
